<template>
	<view class='recommend'>
		<view class="system-height" :style="{height:statusBarHeight}"></view>
		<block v-if="tempArr.length">
			<view class='recommendList' :class="isShowTitle?'':'mt30'">
				<view class="recommend-list">
					<view class="list-left" v-for="(item,index) in List" :key="index">
						<image :src="item.icon"></image>
						<view class="list-content">
							<view class="c-left">
								<view class="ctitle">{{item.name}}</view>
								<view class="desc">{{item.remark}}</view>
							</view>
							<view class="c-right" @click.stop='onstroll(item)'>
								秒玩
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class='loadingicon acea-row row-center-wrapper' :hidden='loading==false'>
				<text class='loading iconfont icon-jiazai'></text>
			</view>
			<view class="mores-txt flex" v-if="goodScroll">
				<text>我是有底线的</text>
			</view>
		</block>
		<!-- <view class="btn-adv" @click="onwatchAd">观看广告</view> -->
		<FullScreenAd :uid="uid"></FullScreenAd>
		<pageFooter></pageFooter>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import animationType from '@/utils/animationType.js'
	import {
		getProductHot
	} from '@/api/product.js';
	import {
		getblindBoxList
	} from '@/api/new.js';
	import WaterfallsFlow from '@/components/WaterfallsFlow/WaterfallsFlow.vue';
	import WaterfallsFlowItem from '@/components/WaterfallsFlowItem/WaterfallsFlowItem.vue';
	import TitleBox from '@/components/titleBox/index.vue';
	import pageFooter from "@/components/pageFooter/index.vue";
	import FullScreenAd from "@/components/FullScreenAdvertis/index.vue"
	let statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	let app = getApp();
	export default {
		name: 'recommend',
		computed: mapGetters(['uid']),
		components: {
			WaterfallsFlow,
			TitleBox,
			pageFooter,
			FullScreenAd
		},
		props: {
			categoryId: {
				type: Number,
				default: function() {
					return 0;
				}
			},
			//是否显示头部
			isShowTitle: {
				type: Boolean,
				default: function() {
					return true;
				}
			},
			//是否使用本页面的请求数据
			isDefault: {
				type: Boolean,
				default: function() {
					return true;
				}
			},
			//使用的页面中调用数据传来的商品列表，isDefault为false时使用
			recommendList: {
				type: Array,
				default: function() {
					return [];
				}
			}
		},
		data() {
			return {
				urlDomain: this.$Cache.get("imgHost"),
				theme: app.globalData.theme,
				goodScroll: false,
				params: { //精品推荐分页
					page: 1,
					limit: 10,
					cid: 0
				},
				loading: false,
				tempArr: [],
				List: [],
				statusBarHeight: statusBarHeight
			};
		},
		mounted() {
			// console.log("zjJSBridge",zjJSBridge)
			if (this.isDefault) {
				this.params.page = 1;
				this.goodScroll = false;
				this.tempArr = [];
				this.get_host_product()
				this.Getlist()
			} else {
				this.tempArr = this.recommendList
			};
		},
		methods: {
			/**
			 * 获取我的盲盒游戏
			 */
			get_host_product: function() {
				if (this.goodScroll) return;
				this.loading = true
				this.params.cid = this.categoryId;
				getProductHot(
					this.params
				).then((res) => {
					this.$set(this.params, 'page', this.params.page + 1);
					this.goodScroll = this.params.page > res.data.totalPage;
					this.tempArr = this.tempArr.concat(res.data.list || []);
					this.$emit('getRecommendLength', this.tempArr.length);
					this.loading = false
				}).catch(err => {
					this.loading = false
				});
			},

			Getlist: function() {
				this.loading = true
				getblindBoxList().then((res) => {
					this.List = res.data
					this.loading = false
				}).catch(err => {
					// this.loading = false
				});
			},


			// 跳转
			onstroll: function(item) {
				console.log(item)
				uni.navigateTo({
					url: `/pages/blind/index?id=${item.id}`
				})
			},
			// 观看广告
			onwatchAd: function() {
				// this.$refs.adRewardedVideo.show();
			}

		},
		onReachBottom() {
			if (this.isDefault) this.get_host_product();
		}
	}
</script>

<style scoped lang="scss">
	.mores-txt {
		width: 100%;
		align-items: center;
		justify-content: center;
		height: 70rpx;
		color: #999;
		font-size: 24rpx;

		.iconfont {
			margin-top: 2rpx;
			font-size: 20rpx;
		}
	}

	.recommend {
		.title {
			height: 120rpx;
			line-height: 120rpx;
			font-size: 32rpx;
			color: #333333;

			.iconfont {
				font-size: 170rpx;
				color: #454545;
			}
		}

		.name {
			margin: 0 28rpx;
		}
	}

	.btn-adv {
		position: fixed;
		width: 80px;
		height: 35px;
		border-radius: 20px;
		background-color: blue;
		color: #fff;
		font-size: 12px;
		text-align: center;
		line-height: 35px;
		margin: auto;
		margin-top: 30px;
		left: 0;
		right: 0;
		top: 10;
	}

	.recommendList {
		padding-top: 5px;
		background-color: #f5f5f5;
	}

	.recommend-list {
		width: 100%;
		display: flex;
		flex-wrap: wrap;

		.list-left {
			width: 47%;
			background-color: #fff;
			border-radius: 10px;
			position: relative;
			margin-left: 10px;
			margin-top: 10px;
			padding: 5px;

			image {
				width: 100%;
				border-radius: 10px;
				height: 180px;
			}

			.list-content {
				width: 100%;
				display: flex;
				// padding: 5px;

				.c-left {
					width: 70%;

					.ctitle {
						font-size: 18px;
						line-height: 20px;
						font-weight: 700;
					}

					.desc {
						font-size: 12px;
						line-height: 30px;
						color: #999;
					}
				}

				.c-right {
					width: 50px;
					height: 30px;
					background-color: red;
					text-align: center;
					color: #fff;
					line-height: 30px;
					border-radius: 10px;
				}
			}

		}

		:first-child(1) {
			margin-left: 0px;
		}
	}
</style>
